<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>

	<body>
		<canvas id="canvas" width="500" height="500" style="border: 1px solid red;"></canvas>
	</body>
	<script type="text/javascript">
		var context = document.getElementById("canvas").getContext("2d");

		function watch() {
			context.clearRect(-200, -200, 500, 500);
			context.save()
			context.translate(200, 200);

			//表盘
			context.save();
			context.beginPath();
			context.arc(0, 0, 151, 0, Math.PI * 2, false);
			context.fillStyle = "yellow";
			context.fill();
			context.lineWidth = 5;
			context.stroke();
			context.restore();
			
			
			//new date
			var date = new Date();
			var h = date.getHours();
			var m = date.getMinutes();
			var s = date.getSeconds();
			
						
			//长度
			var length = 140;
			//秒针
			var zb = Math.PI * 2 * (15 - s) / 60;
			var length1 = length * 0.9;
			var width1 = 3;
			var color1 = "blue"
			draw_all(zb, length1, width1, color1);
			//分针
			var zb = Math.PI * 2 * (15 - (m + s / 60)) / 60;
			var length1 = length * 0.7;
			var width1 = 4;
			var color1 = "red"
			draw_all(zb, length1, width1, color1);
			//时针
			var zb = Math.PI * 2 * (3 - (h + m / 60)) / 12;
			var length1 = length * 0.5;
			var width1 = 7;
			var color1 = "black"
			draw_all(zb, length1, width1, color1);
			context.beginPath();
			moveTo(0, 0);
			context.arc(0, 0, 10, 0, Math.PI * 2, false);
			//表芯
			context.fillStyle = "black";
			context.fill();
			
			context.restore();
			//延时1秒
			setTimeout(watch, 1000);
		}
		//绘制表针
		function draw_all(zb, length, width, color) {
			var x = length * Math.cos(zb);
			var y = -length * Math.sin(zb);
			context.lineWidth = width;
			context.strokeStyle = color;
			context.beginPath();
			context.moveTo(0, 0);
			context.lineTo(x, y);
			context.lineCap = "round";
			context.stroke();
		}
		
		window.addEventListener("load", watch, true);
	</script>

</html>